<template>
    <div class="mars3dBox" v-show="isLoadUrlData">
        <!-- <singleProperty></singleProperty> -->
        <div v-show="isEditor">
            <!-- 顶部按钮 -->
            <topBtns v-show="!printMapAnImageIsShow" />
            <!-- <coverage /> -->
            <contextMenu v-show="cmData.isShow"></contextMenu>
            <singleProperty v-show="singlePropertyIsShow"></singleProperty>
            <!-- 打印地图组件 -->
            <!-- <printMap v-if="printMapAnImageIsShow">
            <mars3d mapKey="one"></mars3d>
        </printMap> -->
            <div class="printMap" v-show="printMapAnImageIsShow">
                <div class="hBoxs">
                    <!-- <div class="mapShowBox" :style="style">
                    <slot></slot>
                </div> -->
                    <div class="hanlderBox">
                        尺寸：
                        <el-button type="info" class="selectBtn" @click="openList">{{ selectText }} <i class="el-icon-caret-bottom"></i></el-button>
                        <el-button type="info" icon="fa fa-file-image-o" @click="saveImages"> 存为图片</el-button>
                        <el-button type="info" icon="fa fa-print" @click="printImg"> 打印</el-button>
                        <el-button type="info" icon="el-icon-close" @click="closePrintMap" title="关闭"></el-button>
                        <ul class="printMapMeasure" v-show="printMapMeasureIsShow">
                            <li class="printMapMeasureLi" v-for="(item, index) in options" :key="item.value" @click="selectOptions(item, index)">{{ item.label }}</li>
                        </ul>
                    </div>
                </div>
                <div class="printImgBox" v-show="printImgUrl">
                    <img :src="printImgUrl" alt="" class="printImgBoxImage" />
                </div>
            </div>
        </div>
        <!-- <div v-else class="editorBase">
            <a :href="editorMapUrl" target="_parent" v-if="linkBtn">
                <el-button type="success">编辑基地</el-button>
            </a>
        </div> -->
        <!-- 地球 -->
        <div class="bigeMapBoxDiv" :style="style">
            <mars3d :mapKey="mapKey"></mars3d>
        </div>
    </div>
</template>
<script>
// var graphicLayer
import mars3d from '@/components/mars3d.vue'
import topBtns from '@/components/topBtns.vue'
import contextMenu from '@/components/tool/contextMenu/contextMenu.vue'

// 单个设置属性框
import singleProperty from '@/components/tool/editor/single/single.vue'
import { encode, decode } from '@/utils/encryption'
import { initTreeData } from '@/components/tool/coverage/utils/coverage.config'
import { initMap } from '@/components/utils/initMap'
window.addEventListener('message', function(event) {
    let data = event.data
    if (data) {
        if (data.lngLat && data.lngLat.length > 0) {
            initMap.flyTo(data.lngLat)
        }
        if (data.baseId) {
            sessionStorage.setItem('baseId', data.baseId)
            initTreeData('tree')
        }
    }
})
export default {
    components: {
        mars3d,
        topBtns,
        contextMenu,
        singleProperty
        // printMap
        // coverage
        // MapLeftMen
    },
    data() {
        return {
            options: [
                {
                    label: 'A1纸横向',
                    value: 1,
                    style: {
                        width: '841mm',
                        height: '594mm',
                        transform: 'matrix(0.43, 0, 0, 0.43, -630, 0)'
                    }
                },
                {
                    label: 'A1纸纵向',
                    value: 2,
                    style: {
                        width: '594mm',
                        height: '841mm',
                        transform: 'matrix(0.3, 0, 0, 0.3, -190,0)'
                    }
                },
                {
                    label: 'A2纸横向',
                    value: 3,
                    style: {
                        width: '594mm',
                        height: '420mm',
                        transform: 'matrix(0.6, 0, 0, 0.6, -162, 0)'
                    }
                },
                {
                    label: 'A2纸纵向',
                    value: 4,
                    style: {
                        width: '420mm',
                        height: '594mm',
                        transform: 'matrix(0.43, 0, 0, 0.43, 0,0)'
                    }
                },
                {
                    label: 'A3纸横向',
                    value: 5,
                    style: {
                        width: '420mm',
                        height: '297mm',
                        transform: 'matrix(0.86, 0, 0, 0.86, 0, 0)'
                    }
                },
                {
                    label: 'A3纸纵向',
                    value: 6,
                    style: {
                        width: '297mm',
                        height: '420mm',
                        transform: 'matrix(0.6, 0, 0, 0.6, 0,0)'
                    }
                },
                {
                    label: 'A4纸横向',
                    value: 7,
                    style: {
                        width: '297mm',
                        height: '210mm',
                        transform: 'matrix(1, 0, 0, 1, 0, 0)'
                    }
                },
                {
                    label: 'A4纸纵向',
                    value: 8,
                    style: {
                        width: '210mm',
                        height: '297mm',
                        transform: 'matrix(0.86, 0, 0, 0.86, 0, 0)'
                    }
                }
            ],
            selectText: 'A4纸横向',
            selectIndex: 6,
            printMapMeasureIsShow: false,
            style: '',
            printImgUrl: '',
            isLoadUrlData: false,
            isEditor: true,
            // editorMapUrl: '',
            // btnsIsShow: true
            mapKey: ''
            // linkBtn: true
        }
    },
    computed: {
        cmData() {
            return this.$store.state.contextMenu
        },
        singlePropertyIsShow() {
            return this.$store.state.singleProperty
        },
        printMapAnImageIsShow() {
            return this.$store.state.printMapAnImage
        }
    },
    created() {
        // console.log(this.$route.hash.split('#'))
        // sessionStorage.setItem('baseId', 1)
    },
    watch: {
        printMapAnImageIsShow(newData) {
            if (newData) {
                this.style = this.options[this.selectIndex].style
            } else {
                this.style = {
                    width: '100%',
                    height: '100vh'
                }
            }
        }
    },

    mounted() {
        if (this.$route.hash) {
            let urlData = JSON.parse(sessionStorage.getItem('urlData'))
            let urlBase = decode(this.$route.hash.split('#')[1])
            if (urlData) {
                // 有缓存
                // this.isEditor = urlData.editor
                // this.isLoadUrlData = true
            } else {
                // 无缓存情况下，第一次登陆
                console.log(urlBase)
            }
            console.log(urlBase)
            let dateTime = new Date().getTime()
            let min30 = 10 * 60 * 1000
            if (dateTime - min30 > urlBase.t) {
                this.$router.replace('404')
            }
            try {
                sessionStorage.setItem('urlData', JSON.stringify(urlBase))
                sessionStorage.setItem('baseId', urlBase.baseId)
                // sessionStorage.setItem('baseId', 1)

                this.isEditor = urlBase.editor
                this.mapKey = urlBase.key
                if (urlBase.lngLat && urlBase.lngLat.length > 0) {
                    // debugger
                    setTimeout(() => {
                        initMap.flyTo(urlBase.lngLat)
                    }, 500)
                }
                // this.linkBtn = urlBase.linkBtn
                // if (!urlBase.editor) {
                //     urlBase.editor = true // 设置为可编辑
                //     // this.editorMapUrl = `http://59.110.54.18:90#${encode(urlBase)}`
                // }
                this.isLoadUrlData = true
            } catch (error) {}
        } else {
            let urlBase = {
                // 5c9d817edba24cdeb538fd0e9afa0a02
                baseId: '01d628177db94baba3afed277e2706b5',
                // baseId: '01d628177db94baba3afed277e2706b5',
                phone: 13628220409,
                verificationCode: 'ksadasdghfliuslixcuvhkb123ljhshdfkljb98',
                t: new Date().getTime(),
                editor: true // 是否可以编辑
            }
            // 14a23d609ddc48e391ad0d4658a061a2
            sessionStorage.setItem('urlData', JSON.stringify(urlBase))
            sessionStorage.setItem('baseId', urlBase.baseId)
            this.isLoadUrlData = true
        }
    },
    methods: {
        flyTo(lngLat) {
            map.flyToPoint(lngLat)
        },
        closePrintMap() {
            this.$store.commit('setPrintMap')
        },
        openList() {
            this.printMapMeasureIsShow = !this.printMapMeasureIsShow
        },
        selectOptions(item, index) {
            this.selectText = item.label
            this.style = item.style
            this.selectIndex = index
            this.openList()
        },
        saveImages() {
            map.expImage()
            this.printMapMeasureIsShow = false
        },
        printImg() {
            map.expImage({
                download: false,
                callback: (base64, size) => {
                    // 回调
                    this.printImgUrl = base64
                    $('.hBoxs').hide()
                    setTimeout(() => {
                        window.print()
                        setTimeout(() => {
                            this.printImgUrl = ''

                            $('.hBoxs').show()
                        }, 300)
                    }, 500)
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.mars3dBox {
    height: 100%;
    .editorBase {
        position: absolute;
        z-index: 999;
        display: block;
        right: 10px;
        top: 10px;
    }
}
.bigeMapBoxDiv {
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.printMap {
    position: fixed;
    // width: 100%;
    // height: 100%;
    left: 0;
    // top: 0;
    right: 0;
    // bottom: 0;
    z-index: 2001;
    // background: rgb(204, 204, 204);
    .mapShowBox,
    .printImgBoxImage {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .printImgBox {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        z-index: 2005;
    }
    .printImgBoxImage {
        width: 100%;
        object-fit: none;
        background: rgb(204, 204, 204);
    }
    .hanlderBox {
        color: #ffffff;
        background: rgba(63, 72, 84, 0.6);
        padding: 5px 10px;
        display: inline-block;
        border-radius: 5px;
        position: absolute;
        top: 10px;
        right: 10px;
        white-space: nowrap;
        .selectBtn {
            position: relative;
            width: 140px;
            text-align: left;
            i {
                position: absolute;
                right: 10px;
            }
        }
        .printMapMeasure {
            position: absolute;
            background: rgba(63, 72, 84, 0.6);
            width: 140px;
            border-radius: 2px;
            text-align: center;
            padding-left: 0;
            border: 1px solid rgba(32, 160, 255, 0.3);
            margin-top: 2px;
            left: 56px;
            padding: 2px 0;
            .printMapMeasureLi {
                width: 100%;
                padding: 5px 0;
                cursor: pointer;
                &:hover {
                    background: rgba(32, 160, 255, 0.3);
                }
            }
        }
    }
}
</style>
